<template>
  <div style="border: solid 20px rgb(245, 247, 249)">
    <Button
      style="color: aliceblue;margin: 20px"
      icon="ivu-icon ivu-icon-md-add"
      type="primary"
      @click="modal = true"
      >新增</Button
    >
    <Table border :columns="columns" :data="data">
      <template #name="{ row }">
        <strong>{{ row.name }}</strong>
      </template>
      <template #action="{  index }">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="show(index)"
          >修改</Button
        >
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
    <Page :total="total.length" :current="page" simple page-size="5" @on-change="handlerPage"/>
  </div>
  <!-- 弹出内容添加 -->
  <Modal
    v-model="modal"
    title="新增管理员"
    :loading="loading"
    @on-ok="asyncOK(true)"
    class="inp1"
  >
    分类名称:<Input
      v-model="this.dates.name"
      placeholder="分类名称"
      style="width: 400px; margin: 10px"
    />
    分类排序:<Input
      v-model="dates.sort"
      placeholder="排序"
      style="width: 400px; margin: 10px"
    />
    <RadioGroup v-model="this.dates.indexShow">
      <Radio label="1"></Radio>
      <Radio label="0"></Radio>
    </RadioGroup>
    <Ipload @getUrl="zz"></Ipload>
  </Modal>
</template>
<script>
import { list,add,del } from "../../Api/goodsCate.js";
import Ipload from "../../components/Upload.vue";
export default {
  components: { Ipload },
  created() {
    this.qq()
    this.total = this.data
  },
  data() {
    return {
      page:1,
      total:[],

      modal: false,
      columns: [
        {
          title: "分类名",
          key: "name",
        },
        {
          title: "排序",
          key: "sort",
        },
        {
          title: "分类图",
          key: "url",
          width: 240,
          render: (h, params) => {
            return h("img", {
              src: params.row.url,
              style: {
                width: "200px",
                height: "100px",
              },
            });
          },
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      data: [],
      dates: { name: "", sort: 0, url: "", indexShow: 0 },
    };
  },
  methods: {
    loadData() {
       this.progressData = [];
       //接口参数
      let params = {};
      //接口
      tableData(params).then(({ result }) => {
        this.progressData = result;
        if (this.page) {
          this.pageData = this.progressData.slice(0, 30);
        } else {
          this.changeData();
        }
      });
    },
    handlerPage(page) {
      this.changeData(page);
    },
    changeData(page) {
      this.page = page;
      if (this.progressData.length > 30) {
        this.pageData = this.progressData.slice((page - 1) * 30, page * 30);
      } else {
        this.pageData = this.progressData;
      }
    },
    // 封装
    qq(){
      list().then((res) => {
        console.log(res);
        for (let i = 0; i < res.data.data.length; i++) {
          this.data[i] = res.data.data[i];
        }
      });
    },

    zz(i) {
      console.log(i);
      this.dates.url = i;
    //   this.dates.length
      console.log(this.data.length);
    },
    asyncOK() {
      add({
        name: this.dates.name,
        sort: this.dates.sort,
        url: this.dates.url,
        index_show: this.dates.indexShow,
      }).then((res) => {
        console.log(res);
      });
      this.qq()
    },
    show(index) {
      this.$Modal.info({
        title: "User Info",
        content: `Name:${this.data[index].name}<br>sort:${this.data[index].sort}<br>url:${this.data[index].url}`,
      });
    },
    remove(index) {
      del(this.data[index]._id).then(res=>{
        console.log(res);
      })
      this.data.splice(index, 1);
    },
  },
};
</script>